<template>
    <div
            :class="{
			'list-page': pageListFlag
		}"
    >
        <div class="header" v-if="!pageListFlag">
            <el-link :underline="false" href="/"><img class="logo" src="../assets/logo.svg"/></el-link>
            <div class="search-box" style=" ">
           <!-- typeData: {{typeData}}  -->
           
                <el-input
                        placeholder="请输入内容"
                        v-model="input3"
                        clearable
                        class="input-with-select"
                        @keyup.enter="submitFn"
                >
                    <template #prepend>
                        <el-select v-model="select" @change="submitFn" placeholder="请选择">
                            <el-option label="全部" value=""></el-option>
                            <el-option v-for="item in typeData" :key="item" :label="item" :value="item"></el-option>
                        </el-select>
                    </template>
                    <template #append>
                        <el-button type="primary" @click="submitFn"  ><el-icon style="vertical-align: middle;padding-right: 10px;" >
                            <Search />
                            </el-icon> 搜 索</el-button>
                    </template>
                </el-input>
            </div>
        </div>

        <!-- svg list v-infinite-scroll="load" v-infinite-scroll="load2(key)"-->
        <div class="main">
            <div class="nums_text" v-if="pageListFlag">
                为您找到相关图标 {{ listDataLength }} 个
                <div class="search-box-inner" style=" ">
                    <el-input
                            placeholder="请输入内容"
                            v-model="input3"
                            clearable
                            class="input-with-select"
                            @keyup.enter="submitFn"
                    >
                        <template #prepend>
                            <el-select v-model="select" @change="submitFn" placeholder="请选择">
                                <el-option label="全部" value=""></el-option>
                                <el-option v-for="item in typeData" :key="item" :label="item" :value="item"></el-option>
                            </el-select>
                        </template>
                        <template #append>
                            <el-button type="primary" @click="submitFn"><el-icon style="vertical-align: middle;padding-right: 10px;" >
                            <Search />
                            </el-icon> 搜 索</el-button>
                        </template>
                    </el-input>
                </div>
            </div>
            <div class="svg-main">
                <div v-for="(item, key) in listObjData" :key="item">
                    <el-divider direction="horizontal" content-position="left">{{ key }}</el-divider>
                    <div class="svg-list-box">
                        <div class="skin-tips"><i class="white"></i><span>银白皮肤</span></div>
                        <span class="item" v-for="imgUrl in item['银白皮肤']" :key="imgUrl">
						<el-image :src="'/' + imgUrl" :title="imgUrl" lazy></el-image>
                            <!-- <img :src="'/' + imgUrl" :alt="imgUrl" :title="imgUrl" srcset="" /> -->
						<span class="title">{{ imgUrl.replace(/.+\/|\.svg/g, "") }}</span>
						<span class="down"
                        ><a
                                @click="tongjiFn(2, imgUrl)"
                                :href="'/' + imgUrl"
                                :download="changeFileName(imgUrl.split('/').reverse()[0], 'silver')"
                        >下载</a
                        >
						</span>
					</span>
                        <div class="skin-tips"><i class="black"></i><span>酷黑皮肤</span></div>
                        <span class="item" v-for="imgUrl in item['酷黑皮肤']" :key="imgUrl">
						<el-image :src="'/' + imgUrl" :title="imgUrl" lazy></el-image>
                            <!-- <img :src="'/' + imgUrl" :alt="imgUrl" :title="imgUrl" srcset="" /> -->
						<span class="title">{{ imgUrl.replace(/.+\/|\.svg/g, "") }}</span>
						<span class="down"
                        ><a
                                @click="tongjiFn(2, imgUrl)"
                                :href="'/' + imgUrl"
                                :download="changeFileName(imgUrl.split('/').reverse()[0], 'black')"
                        >下载</a
                        >
						</span>
					</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="svg-collect" v-if="pageListFlag">
            <div class="text">
                <i class="el-icon-download" >{{ totalDownload }}</i>
            </div>
        </div>

    </div>
</template>

<script>
    import { search, typeList, tongji, tongjiTotal } from "../api/nav"; //引入进来
    // import addCSS from './plugins/addCSS'; //引入进来
    // import SearchBox from './components/SearchBox.vue';
    // 获取参数
    function getQueryString(variable, url = "") {
        var query = url.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return "";
    }
    // console.log('addCSS', addCSS);

    export default {
        name: "svg",
        components: {
            // SearchBox,
        },
        data() {
            return {
                show: 0,
                listData: [],
                pageListFlag: false,
                listDataLength: 0,
                listObjData: {},
                listObjDataCopy: {},
                typeData: [],
                input3: "",
                select: "",
                style: {
                    width: "100%",
                    align: "center",
                },
                totalDownload: 0
            };
        },
        created() {
            // console.log(window.location.search);
            // console.log(decodeURIComponent(window.location.search));
            let url = decodeURIComponent(window.location.search);
            if (url !== "") {
                this.input3 = decodeURIComponent(getQueryString("sk", url)) || "";
                this.select = decodeURIComponent(getQueryString("type", url)) || "";
                // console.log('this.input3', this.input3);
                // console.log('this.select', this.select);
                if (this.input3 || this.select) {
                    this.searchFn();
                    this.pageListFlag = true;
                }
            }

            this.tongjiTotalFn();
            this.typeListFn();
            this.tongjiFn(1);
        },
        mounted() {},
        methods: {
            load() {
                this.listObjData;
            },
            load2(key) {
                this.listObjData[key];
            },
            changeFileName(origin, type) {
                // origin = abc.svg
                let name = origin.split('.')[0]
                if (type === 'black') {
                    name = name + '(黑).svg'
                } else if (type === 'silver') {
                    name = name + '(白).svg'
                }
                return name
            },
            submitFn() {
                let url = decodeURIComponent(window.location.search);
                console.log("url", url);

                if (url == "") {
                    console.log("11");

                    this.show = 1;
                }
                history.pushState({}, "svg list", `?sk=${this.input3}&type=${this.select}`);
                // if (
                //   this.input3 == '' &&
                //   this.select == '' &&
                //   this.pageListFlag == false
                // ) {
                //   this.show = 1;
                // }
                this.pageListFlag = true;

                this.searchFn();
                // var obj = {
                //   sk: this.input3,
                //   type: this.select,
                // };
                // search(obj) //函数名以及传参
                //   .then((res) => {
                //     console.log(res); //成功后返回的数据
                //     this.listData = res.data.list;
                //   });
                // three(123) //函数名以及传参
                //   .then((res) => {
                //     console.log(res); //成功后返回的数据
                //   });
            },
            searchFn() {
                var obj = {
                    sk: this.input3,
                    type: this.select,
                };
                // 统计搜索次数
                this.tongjiFn(3);
                search(obj) //函数名以及传参
                    .then((res) => {
                        console.log(res); //成功后返回的数据
                        if (res.code === 0) {
                            this.listObjData = {};
                            this.listObjDataCopy = {};
                            if (res.data) {
                                this.listData = res.data.list;
                                this.listDataLength = res.data.list.length;
                                res.data.list.forEach((item) => {
                                    let key = item.split("/")[1];
                                    this.listObjData[key] = this.listObjData[key] || {};
                                    if (item.indexOf("银白皮肤") > -1) {
                                        this.listObjData[key]["银白皮肤"] = this.listObjData[key]["银白皮肤"] || [];
                                        this.listObjData[key]["银白皮肤"].push(item);
                                    } else if (item.indexOf("酷黑皮肤") > -1) {
                                        this.listObjData[key]["酷黑皮肤"] = this.listObjData[key]["酷黑皮肤"] || [];
                                        this.listObjData[key]["酷黑皮肤"].push(item);
                                    } else {
                                        this.listObjData[key]["其他"] = this.listObjData[key]["其他"] || [];
                                        this.listObjData[key]["其他"].push(item);
                                    }
                                    // this.listObjData[key].push(item);
                                    // if (index < 20) {}

                                    // this.listObjDataCopy[key] = this.listObjDataCopy[key] || [];
                                    // this.listObjDataCopy[key].push(item);
                                });
                                console.log("listObjData", JSON.stringify(this.listObjData));
                            }
                        }
                    });
            },
            typeListFn() {
                typeList() //函数名以及传参
                    .then((res) => {
                        console.log(res); //成功后返回的数据
                             this.typeData = res.data.list;
                    });
            },
            // 统计
            tongjiFn(type, imgUrl = "") {
                tongji(type, imgUrl) //函数名以及传参
                    .then((res) => {
                        console.log(res); //成功后返回的数据
                        this.tongjiTotalFn()
                    });
            },
            // 统计总数
            tongjiTotalFn() {
                tongjiTotal() //函数名以及传参
                    .then((res) => {
                        console.log(res); //成功后返回的数据
                        if (res.code === 0) {
                            this.totalDownload = res.data.list.find(elem => elem.type === '2').num
                        }

                    });
            },
        },
    };
</script>

<style lang="scss">
    .search-box {
        width: 654px;
        margin: 305px auto 15px;
        .el-input-group__append {
            // background-color: #5e99f3;
            // border: 1px solid #007ae2;
            border-radius: 0 10px 10px 0;
            width: 106px;
            padding-left: 0;
            padding-right: 0;
            // height: 40px;
            background: #007ae2;

            color: #f5f5f5;
            .el-button {
                font-size: 17px;
                .el-icon-search {
                    font-size: 20px;
                    vertical-align: middle;
                }
                span {
                    vertical-align: middle;
                }
            }
        }

        .el-select .el-input {
            width: 125px;
        }
        .el-input-group--prepend .el-input-group__prepend .el-select .el-input .el-input__wrapper{
            box-shadow: none !important;
        }
        .el-input-group--prepend .el-input-group__prepend .el-select .el-input.is-focus .el-input__wrapper{
            box-shadow: none !important;
        }
        .input-with-select .el-input-group__prepend {
            background-color: #fff;
            border-radius: 10px 0 0 10px;
        }
        .el-input-group__prepend {
            // border: 2px solid #c4c7ce;
            // height: 40px;
            border-right: none;
            .el-select {
                &::after {
                    content: "";
                    width: 1px;
                    position: absolute;
                    right: 0;
                    top: 6px;
                    height: 31px;
                    background: #e5e7ea;
                    display: block;
                }
            }
        }

        .el-input__inner {
            height: 40px;
            border-left: none;
            border-right: none;
            //border-top: 2px solid #c4c7ce;
            //border-bottom: 2px solid #c4c7ce;
        }
        .el-input.is-active .el-input__inner,
        .el-input__inner:focus {
            border-color: #c4c7ce;
        }
    }
    .search-box-inner {
        display: inline-block;
        width: 500px;
        float: right;
        margin: 0;
        .el-input-group__append {
            // background-color: #5e99f3;
            // border: 1px solid #007ae2;
            border-radius: 0 10px 10px 0;
            width: 84px;
            padding-left: 10px;
            padding-right: 0;
            /*height: 34px;*/
            background: #007ae2;

            color: #f5f5f5;
            .el-button {
                font-size: 14px;
                padding: 0 28px;
                .el-icon-search {
                    font-size: 14px;
                    vertical-align: middle;
                }
                span {
                    vertical-align: middle;
                }
            }
        }
        .el-select .el-input {
            width: 125px;
        }
        .input-with-select .el-input-group__prepend {
            background-color: #fff;
            border-radius: 10px 0 0 10px;
        }
        .el-input-group__prepend {
            // border: 1px solid #c4c7ce;
            /*height: 34px;*/
            border-right: none;
            .el-select {
                &::after {
                    content: "";
                    width: 1px;
                    position: absolute;
                    right: 0;
                    top: 6px;
                    height: 25px;
                    background: #e5e7ea;
                    display: block;
                }
            }
        }

        .el-input__icon {
            line-height: 34px;
        }
        .el-input__inner {
            height: 34px;
            line-height: 34px;
            border-left: none;
            border-right: none;
            // border-top: 1px solid #c4c7ce;
            // border-bottom: 1px solid #c4c7ce;
        }
        .el-input-group--prepend .el-input-group__prepend .el-select .el-input .el-input__wrapper{
            box-shadow: none !important;
        }
        .el-input-group--prepend .el-input-group__prepend .el-select .el-input.is-focus .el-input__wrapper{
            box-shadow: none !important;
        }
        .el-input.is-active .el-input__inner,
        .el-input__inner:focus {
            border-color: #c4c7ce;
        }
    }
    .logo {
        position: absolute;
        transform: translate(-50%);
        top: 220px;
        width: 245px;
        left: 50%;
    }

    .opacity {
        opacity: 0;
    }
    .list-page {
        margin-top: 60px;
        padding: 20px;
        padding-bottom: 50px;
        position: inherit;
        .header {
            opacity: 1;
            position: fixed;
            top: 0;
            width: 100%;
            background: #fff;
            z-index: 99;
            box-shadow: 1px 0px 5px rgba($color: #000000, $alpha: 0.39);
        }
        .main {
            padding: 20px;
            padding-bottom: 50px;
            .nums_text {
                text-align: left;
                font-size: 13px;
                height: 41px;
                line-height: 41px;
                color: #999;
                position: fixed;
                display: block;
                margin-bottom: 20px;
                z-index: 120;
                top: 62px;
                width: 95%;
                background: #fff;
                padding-top: 30px;
                padding-bottom: 20px;
            }
            .svg-main {
                margin-top: 90px;
                z-index: 200;
                position: inherit;
            }
            .el-divider {
                .el-divider__text {
                    border-bottom: 2px solid #007ae2;
                    top: -17px;
                    left: 0;
                    font-size: 18px;
                    padding: 0 8px 0 0;
                    line-height: 26px;
                    color: #007ae2;
                    &::before {
                        position: relative;
                        bottom: -6px;
                        width: 26px;
                        height: 26px;
                        margin-right: 4px;
                        display: inline-block;
                        content: "";
                        background: url(../assets/img/list-icon.svg) no-repeat bottom left;
                    }
                }
            }
            .svg-list-box {
                display: flex;
                flex-wrap: wrap;
                justify-content: left;
                font-size: 12px;
                .skin-tips {
                    width: 100%;
                    text-align: left;
                    height: 32px;
                    background: #fafafa;
                    border-radius: 5px;
                    padding: 6px 0 0 10px;
                    font-size: 16px;
                    font-weight: 400;
                    color: #2c3e50;
                    line-height: 26px;
                    span {
                        padding-left: 4px;
                        display: inline-block;
                        vertical-align: middle;
                    }
                    i {
                        display: inline-block;
                        vertical-align: middle;
                        box-sizing: border-box;
                        width: 14px;
                        height: 15px;
                        border-radius: 2px;
                    }

                    .white {
                        // border: 1px solid #3398e2;
                        // background: #ffffff;
                        background: url(../assets/img/white.svg) no-repeat bottom left;
                    }
                    .black {
                        // background: #343536;
                        // border: 1px solid #252526;
                        background: url(../assets/img/black.svg) no-repeat bottom left;
                    }
                    // &::before {
                    //   position: relative;
                    //   bottom: -6px;
                    //   width: 26px;
                    //   height: 26px;
                    //   margin-right: 4px;
                    //   display: inline-block;
                    //   background: url(./assets/img/list-icon.svg) no-repeat bottom left;
                    // }
                }
                .item {
                    width: 100px;
                    padding: 15px 15px 26px;
                    position: relative;
                    display: inline-block;
                    border-radius: 4px;
                    word-break: break-all;
                    img {
                        width: auto;
                        height: 32px;
                        max-width: 32px;
                        max-height: 32px;
                    }
                }
                .title {
                    display: inline-block;
                    width: 100%;
                }
                .down {
                    position: absolute;
                    left: 0;
                    bottom: 0px;
                    display: none;
                    width: 100%;
                    box-sizing: border-box;
                    border-radius: 0 0 4px 4px;
                    background: rgba($color: #000000, $alpha: 0.618);
                    a {
                        display: inline-block;
                        padding: 4px;
                        color: #fff;
                        text-decoration: none;
                    }
                }
                .item:hover {
                    box-shadow: #666 2px 2px 5px;
                    .down {
                        display: inline-block;
                    }
                }
            }
        }
        .el-link {
            position: absolute;

            // animation: mymove 0.5s;
            transform: none;
            top: 0px;
            left: 10px;
            width: 130px;
        }
        .el-divider--horizontal {
            margin-top: 50px;
        }
        .logo {
            // animation: mymove 0.5s;
            transform: none;
            top: 25px;
            left: 10px;
            width: 130px;
        }
        .search-box {
            // animation: mymove2 0.6s;
            margin-top: 15px;
            /* float: left; */
        }
    }
    .animation {
        .el-link {
            animation: mymove 0.3s;

            position: absolute;
            transform: none;
            top: 0px;
            left: 10px;
            width: 130px;
        }
        .search-box {
            animation: mymove2 0.5s;
            margin-top: 15px;
        }

        // .logo {
        //   animation: mymove 0.3s;
        //   transform: none;
        //   top: 25px;
        //   left: 10px;
        //   width: 130px;
        // }
    }
    @keyframes mymove2 {
        from {
            margin-top: 305px;
        }
        to {
            margin-top: 15px;
        }
    }
    @keyframes mymove {
        from {
            transform: translate(-50%);
            top: 180px;
            width: 245px;
            left: 50%;
        }
        to {
            transform: none;
            top: 22px;
            left: 10px;
            width: 130px;
        }
    }
    // .list-page {
    //   .copy-right {
    //     position: absolute;
    //   }
    // }
    .svg-collect {
        position: fixed;
        bottom: 40px;
        // left: 50%;
        // transform: translate(-50%);
        width: 100%;
        height: 15px;
        text-align: center;
        font-size: 12px;
        color: #3C4042;
        padding: 5px 10px;
        background: #fff;

        .text {
            width: 97%;
            height: 14px;
            font-size: 14px;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            text-align: right;
            color: #3C4042;
            padding-bottom: 2px;
        }
    }
</style>
